<template>
  <div class="content">
    <div class="content-wrapper">
      <div class="center">
        <div class="sigin-img-wrapper">
          <div class="img-tips">
            <h1>Start Your Work</h1>
            <h5>One Key adn there links</h5>
          </div>
        </div>
        <div class="sigup-img-wrapper">
          <div class="img-tips">
            <h1>Start Your Work</h1>
            <h5>One Key adn there links</h5>
          </div>
        </div>
      </div>
      <!-- 表单 -->
      <div class="form">
        <div class="form-wrapper">
          <div class="login-container">
    <div class="login-box">
      <h2 class="login-title">
        <span class="title-bar"></span>
        手机短信登录
      </h2>
      
      <div class="form-group">
        <input 
          type="tel" 
          v-model="phone" 
          class="form-input" 
          placeholder="请输入手机号码"
        >
      </div>
      
      <div class="form-group verification-group">
        <input 
          type="text" 
          v-model="code" 
          class="form-input" 
          placeholder="输入验证码"
        >
        <button 
          @click="sendCode" 
          :disabled="cooldown > 0" 
          class="send-code-btn"
        >
          {{ cooldown > 0 ? `${cooldown}s` : '发送验证码' }}
        </button>
      </div>
      
      <div class="agreement">
        <!-- <label class="checkbox-wrapper">
          <input 
            type="checkbox" 
            v-model="agreed"
          >
          <span class="checkbox-custom"></span>
        </label> -->
        <span class="agreement-text">
          未注册的用户将自动注册
        </span>
      </div>
      
      <button 
        @click="handleLogin" 
        class="login-btn"
        :disabled=" !phone || !code"
      >
        注册登录
      </button>
    </div>
  </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import {sendCodeAPI,loginAPI} from '../../api/user/index'
import { useRouter } from 'vue-router';
//引入用户相关仓库
import useUserStore from '../../store/modules/user';
import {onBeforeMount } from 'vue';
let userStore=useUserStore()
const router=useRouter()
const phone = ref('')
const code = ref('')

const cooldown = ref(0)

onBeforeMount(() => {
  // 在组件实例创建时检查是否有 token，如果有则跳转到 home 页面
  if (localStorage.getItem('token')) {
    router.push({ path:'/home' });
    ElMessage('您已登录')
  }

});
//手机号格式校验
const isValidPhone=(phone:string)=>{
  const phoneRegex= /^1[3-9]\d{9}$/
  return phoneRegex.test(phone)
}

const sendCode = async () => {
  if(!isValidPhone(phone.value)){
    ElMessage.error('请输入正确手机号')
    return
  }
  if (cooldown.value > 0) return
  
  cooldown.value = 60
  const timer = setInterval(() => {
    cooldown.value--
    if (cooldown.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  //  实现发送验证码逻辑
  try {
    const response=await sendCodeAPI(phone.value)
  if(response?.code===200){
    ElMessage.success('验证码已发送')
  }else{
    ElMessage.error(response?.msg||'验证码发送失败')
  }
  } catch (error) {
     ElMessage.error('请求失败，请检查网络或稍后重试')
  }
 
  
}


const handleLogin = async() => {
 if(!isValidPhone(phone.value)){
  ElMessage.error('请输入正确的手机号')
  return
 }
 if(!/^\d{6}$/.test(code.value)){
  ElMessage.error('验证码必须是6位数字')
  return
 }
 let loginData={
  phone:phone.value,
  code:code.value
}
  // 实现登录逻辑
 
  try {
    const response=await loginAPI(loginData)
  if(response?.code===200){

    userStore.setToken(response.data.token)
    localStorage.setItem('username',response.data.username)
    ElMessage.success('登录成功')
    router.push({path:'/home'})
  }else{
    ElMessage.error(response?.msg||'登录失败')
  }
  } catch (error) {
     ElMessage.error('请求失败，请检查网络或稍后重试')
  }
 
}
</script>

<style scoped lang="scss">
/* 定制单选按钮样式 */
.radio {
  display: inline-block;
  width: 20px; /* 单选按钮的宽度 */
  height: 20px; /* 单选按钮的高度 */
  border-radius: 50%; /* 圆形单选按钮 */
  border: 2px solid #ccc; /* 单选按钮边框 */
  background-color: #fff; /* 单选按钮背景色 */
  cursor: pointer;
  margin: 5px 10px 0 50px;
}

/* 选中状态下的单选按钮样式 */
.radio {
  background-color: #007bff; /* 选中状态下的背景色 */
  border-color: #007bff; /* 选中状态下的边框颜色 */
}

.content {
  width: 100vw;
  height: 100vh;
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .content-wrapper {
  width: 65vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .content-wrapper .nav {
  height: 80%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.content .content-wrapper .nav .logo {
  margin: 50px 0;
}
.content .content-wrapper .nav .logo img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.content .content-wrapper .nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.content .content-wrapper .nav .nav-item span {
  color: #6d679e;
  font-size: 12px;
  text-align: center;
  font-family: "Leelawadee", Courier, monospace;
}
.content .content-wrapper .nav .nav-item img {
  width: 40px;
  height: 40px;
}
.content .content-wrapper .nav .nav-item .block {
  width: 4px;
  height: 80%;
  background-color: #251aeb;
  border-radius: 20px;
  opacity: 0;
  transition: 0.2s;
  position: absolute;
  left: -15px;
}
.content .content-wrapper .nav .nav-item:hover .block {
  opacity: 1;
}
.content .content-wrapper .center {
  width: 55%;
  height: 100%;
  position: relative;
  font-family: "Leelawadee", Courier, monospace;
  overflow: hidden;
  transition: 0.5s;
}
.content .content-wrapper .center .sigin-img-wrapper {
  transition: 0.5s;
  width: 100%;
  height: 100%;
  background: url(./asset/sigin-img.gif) no-repeat #251aeb;
  background-size: 55%;
  background-position: center right;
}
.content .content-wrapper .center .sigin-img-wrapper .img-tips {
  position: absolute;
  margin: 40px;
  z-index: 2;
  color: #fff;
}
.content .content-wrapper .center .sigin-img-wrapper .img-tips h1 {
  font-size: 40px;
  letter-spacing: 2px;
}
.content .content-wrapper .center .sigin-img-wrapper .img-tips h5 {
  font-weight: 100;
}
.content .content-wrapper .center .sigup-img-wrapper {
  transition: 0.5s;
  width: 100%;
  height: 100%;
  background: url(./asset/sigup-img.gif) no-repeat #251aeb;
  background-size: contain;
  background-position: center right;
}
.content .content-wrapper .center .sigup-img-wrapper .img-tips {
  position: absolute;
  margin: 40px;
  z-index: 2;
  color: #fff;
}
.content .content-wrapper .center .sigup-img-wrapper .img-tips h1 {
  font-size: 40px;
  letter-spacing: 2px;
}
.content .content-wrapper .center .sigup-img-wrapper .img-tips h5 {
  font-weight: 100;
}
.content .content-wrapper .form {
  width: 35%;
  height: 80%;
  background-color: #fff;
}
.content .content-wrapper .form .form-wrapper {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.content .content-wrapper .form .form-wrapper .common-style {
  width: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.content .content-wrapper .form .form-wrapper .common-style .title {
  margin: 10% 0;
  font-size: 18px;
  font-family: "Leelawadee", Courier, monospace;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .title
  span:first-child {
  color: #acaabe;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .title
  span:last-child {
  color: #251aeb;
  cursor: pointer;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .inputs-item {
  position: relative;
  margin: 10px 0;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .inputs-item
  .input-tips {
  color: #8783b1;
  font-weight: 600;
  margin: 5px 0;
  display: inline-block;
  font-family: "Leelawadee", Courier, monospace;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .inputs-item
  .inputs {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  outline: none;
  border: 1px solid #c6c5ce;
  font-size: 20px;
  padding-right: 50px;
  padding-left: 10px;
  font-family: "Leelawadee", Courier, monospace;
  box-sizing: border-box;
  color: #251aeb;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .inputs-item
  .inputs:focus {
  border: 1px solid #c0d1ff;
  box-sizing: border-box;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .inputs-item::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  right: -10px;
  top: 40px;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .items-email:after {
  background: url(./asset/email.png) no-repeat;
  background-size: 30px;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .items-pwd:after {
  background: url(./asset/pwd.png) no-repeat;
  background-size: 30px;
}
.content
  .content-wrapper
  .form
  .form-wrapper
  .common-style
  .inputs-wrapper
  .items-user:after {
  background: url(./asset/user.png) no-repeat;
  background-size: 30px;
}
.content .content-wrapper .form .form-wrapper .common-style .sigin-btn {
  width: 100%;
  height: 50px;
  background-color: #1f1567;
  border-radius: 10px;
  color: #fff;
  margin-top: 20px;
  font-family: "Leelawadee", Courier, monospace;
  font-size: 20px;
  cursor: pointer;
  border: 0;
}
.content .content-wrapper .form .form-wrapper .common-style .tips {
  margin-top: 20px;
  color: #c6c5ce;
}
.content .content-wrapper .form .form-wrapper .sigin {
  opacity: 1;
  z-index: 1;
  transform: 0.5s;
}
.content .content-wrapper .form .form-wrapper .sigup {
  z-index: -1;
}
.content .content-wrapper .form .form-wrapper .sigup .animations {
  transform: translate(-10%, 0);
  opacity: 0;
}

.nav-form-animation-bottom {
  animation: 0.5s form-nav-animation-bottom;
}

.nav-form-animation-top {
  animation: 0.5s form-nav-animation-top;
}

@keyframes form-nav-animation-bottom {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes form-nav-animation-top {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -20px);
  }
  100% {
    transform: translate(0, 0);
  }
} /*# sourceMappingURL=style.css.map */











/* 字体样式 */
body {
  font-family: 'Arial', sans-serif; /* 设置全局字体为 Arial */
}

.login-container {
  margin-top: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.login-box {
  width: 100%;
  background: white;
  padding: 1%;
}

.login-title {
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif; /* 更现代的字体 */
  font-size: 2vw;  /* 字体稍微增大 */
  font-weight: 600; /* 增加粗体感 */
  margin-bottom: 3vw;
  color: #333;
  letter-spacing: 0.5px; /* 增加字母间距 */

  .title-bar {
    width: 6px;
    height: 2.2vw;
    background: #2468f2;
    margin-right: 8px;
    border-radius: 2px;
  }
}

.form-group {
  margin-bottom: 2vw;
}

.form-input {
  font-family: 'Roboto', sans-serif; /* 设置输入框字体 */
  width: 100%;
  height: 3rem;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #333;
  font-size: 1rem;  /* 设置字体大小 */
  line-height: 1.5;  /* 设置行高，提高可读性 */
  transition: border-color 0.2s;

  &:focus {
    border-color: #2468f2;
    outline: none;
  }

  &::placeholder {
    color: #999;
  }
}

.verification-group {
  display: flex;
  gap: 1vw;

  .form-input {
    flex: 0.7;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #f9f9f9;
    color: #333;

    &:focus {
      border-color: #2468f2;
      background-color: #fff;
      outline: none;
    }

    &::placeholder {
      color: #999;
    }
  }

  .send-code-btn {
    flex: 0.3;
    height: 3rem;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border: none;
    border-radius: 4px;
    background: #448ceb;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加平滑过渡效果 */

    &:hover:not(:disabled) {
      background:rgba(137, 175, 240, 0.856);
    }

    &:disabled {
      background: #d9d9d9; /* 禁用时的背景颜色 */
      color: #888;
      cursor: not-allowed;
      opacity: 0.7;
    }
  }
}

.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 1vw;
  
  .agreement-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;  /* 增加行高 */
  }
  
  .link {
    color: #2468f2;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.login-btn {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right, #4481eb, #04befe);
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.5px; /* 增加字母间距 */
  cursor: pointer;
  transition: opacity 0.2s;

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  &:hover:not(:disabled) {
    opacity: 0.9;
  }
}
</style>
